{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
  <script type="application/json" id="ProductJSON-{{ product.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
  <script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}
{% style %}
  .product__xr-button {
    background: rgba(var(--color-foreground), 0.08);
    color: rgb(var(--color-foreground));
    margin: 1rem auto;
    box-shadow: none;
    display: flex;
    z-index: 1;
  }
  .button.product__xr-button:hover {
    box-shadow: none;
  }
  .product__xr-button[data-shopify-xr-hidden] {
    visibility: hidden;
  }
  .shopify-design-mode .product__xr-button[data-shopify-xr-hidden] {
    display: none;
  }
  @media screen and (max-width: 749px) {
    slider-component .product__xr-button {
      display: none;
    }
    .active .product__xr-button:not([data-shopify-xr-hidden]) {
      display: block;
    }
  }
  @media screen and (min-width: 750px) {
    slider-component + .button.product__xr-button {
      display: none;
    }
    .product__xr-button[data-shopify-xr-hidden] {
      display: none;
    }
  }
  .product__xr-button .icon {
    width: 1.4rem;
    margin-right: 1rem;
  }
{% endstyle %}

{% stylesheet %}
  {%- comment -%}Advert 信息之间的间距为 1em，最后一个正常 {%- endcomment -%}
  .payment-icons>img {
    margin-bottom: .25rem;
    margin-right: .25rem;
  }
  .payment-icons {
    margin-right: -.25rem;
  }
{% endstylesheet %}
{%- liquid
  assign current_variant = product.selected_or_first_available_variant
-%}

{% comment %} 在购买页中以变体图片为节点，将产品图分组，形如 A1 $$ B1;;B2;;B3 $$ C1;;C2 {% endcomment %}
{%- capture image_list -%}
  {%- for product_image in product.images -%}
    {%- if product_image.variants.first.id != blank -%}
      {%- comment -%} If product image is attached to a variant, image.attached_to_variant not working! {%- endcomment -%}
      {%- unless forloop.first -%}$${%- endunless -%}
      {{ product_image.id }}::{{ product_image.position }}||{{ product_image.alt }}
    {%- else -%}
      {%- unless forloop.first -%};;{%- endunless -%}{{ product_image.position }}||{{ product_image.alt }}
    {%- endif -%}
  {%- endfor -%}
{%- endcapture -%}

{%- liquid
  assign show_video = false
  for media in product.media
    if media.media_type == 'external_video' or media.media_type == 'video'
      assign show_video = true
      assign current_video = media
      break
    endif
  endfor
comment
  assign current_product_models = section.blocks | where: "type", "variant" | map: "settings" | where: "product", product.handle
  if current_product_models
    assign current_product_model = current_product_models | where: "variant_name", '' | first
  endif
endcomment
  case section.settings.desktop_media_size
    when 'small'
      assign media_column = 'col-lg-6'
      assign info_column = 'col-lg-6'
    when 'medium'
      assign media_column = 'col-lg-7'
      assign info_column = 'col-lg-5'
    when 'large'
      assign media_column = 'col-lg-8'
      assign info_column = 'col-lg-4'
  endcase

  case section.settings.deskyop_layout
    when 'thumbnails'
      assign show_thumbnails = true
    when 'no_thumbnails'
      assign show_thumbnails = false
  endcase

-%}

<link rel="stylesheet" href="{{ 'media-gallery.min.css' | asset_url }}">
<div class="purchase-section as-purchase-section mb-6 mb-lg-7 mt-0 mt-md-6 mt-lg-7 as-main-product-v2-container">
  <input class="as-main-product-v2-script" type="hidden" value="{{ 'main-product-v2.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>
  <div class="container media-wrap-container">
    <div class="row gx-lg-7 media-wrap-row">
      <div class="col-12 {{ media_column }} media-wrap-col">
        <div class="sticky-top-section gallery-wrap">
        {%- for variant in product.variants -%}
          {% capture variant_image_strs %}{%- render 'get-product-images-by-variant-id', image_list: image_list, target_variant: variant, all_images: product.images -%}{% endcapture %}

          {%- liquid assign variant_image_strs = variant_image_strs | split: ';;' -%}
          <media-gallery class="as-gallery-wrapper {% if current_variant.id != variant.id %}d-none{% endif %}" data-variant-id="{{ variant.id }}">
            <div>
              <script class="as-media-tab-template" type="text/x-handlebars-template">
                <div class="swiper-pagination-bullet badge d-flex align-items-center">{% render 'icon-gallery' %}<span class="text-wrap">{{ 'products.product_gallery.photos' | t }}</span></div>
              </script>
              {%- if show_video -%}
              <script class="as-media-tab-template" type="text/x-handlebars-template">
                <div class="swiper-pagination-bullet badge d-flex align-items-center">{% render 'icon-video' %}<span class="text-wrap">{{ 'products.product_gallery.video' | t }}</span></div>
              </script>
              {%- endif -%}
              {%- if first_3d_model -%}
                <script class="as-media-tab-template" type="text/x-handlebars-template">
                  <div class="swiper-pagination-bullet badge d-flex align-items-center">{% render 'icon-3d' %}<span class="text-wrap">{{ 'products.product_gallery.3d' | t }}</span></div>
                </script>
              {%- endif -%}
            </div>

            <div class="swiper as-media-swiper-outside">
              <div class="swiper-wrapper">
                <div class="swiper-slide as-outer-slide outer-slide">
                  <div class="swiper as-media-swiper-inside media-swiper-inside" {% if show_thumbnails %}data-thumbnails="true"{% endif %}>
                    <div class="swiper-wrapper">
                      {%- for variant_image_str in variant_image_strs -%}
                        {%- liquid
                          assign variant_image = variant_image_str | split: '||'
                          assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
                          assign variant_image_alt = variant_image[1]
                        -%}
                        {%- assign image = product.images[variant_image_pos] -%}
                        <div class="swiper-slide ratio ratio-4x3">
                          <figure class="mb-0 d-flex justify-content-center bg-gray-100 rounded-bottom-right-md-1 rounded-bottom-left-md-1  rounded-top-left-md-1 rounded-top-right-md-1 ">
                            {% if image != blank %}
                              <picture>
                                <img
                                  style="margin:0 auto;"
                                  class="w-auto h-100 object-fit-cover d-block"
                                  srcset="{%- if image.width >= 420 -%}{{ image | img_url: '420x' }} 420w,{%- endif -%}
                                          {%- if image.width >= 720 -%}{{ image | img_url: '720x' }} 720w,{%- endif -%}
                                          {%- if image.width >= 840 -%}{{ image | img_url: '840x' }} 840w,{%- endif -%}
                                          {%- if image.width >= 900 -%}{{ image | img_url: '900x' }} 900w,{%- endif -%}
                                          {%- if image.width >= 1440 -%}{{ image | img_url: '1440x' }} 1440w,{%- endif -%}
                                          {%- if image.width >= 1880 -%}{{ image | img_url: '1880x' }} 1880w,{%- endif -%}
                                          {{ image | img_url: 'master' }} {{ image.width }}w"
                                  sizes="(min-width: 1440px) 900px, (min-width: 768px) 720px, calc(100vw)"
                                  src="{{ image | img_url: '600x600' }}"
                                  alt="{{ variant_image_alt | escape }}"
                                  loading="lazy"
                                  width="900"
                                  height="900" >
                              </picture>
                            {% else %}
                              <picture>
                                <div class="object-fit-cover img-placeholder h-100">
                                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                                </div>
                              </picture>
                            {% endif %}
                          </figure>
                          <modal-opener class="media-icon">
                            <div class="as-modal-trigger w-100 h-100" data-current-index="0" data-bs-toggle="modal" data-bs-target="#as-gallery-modal-{{variant.id}}">
                            </div>
                          </modal-opener>
                        </div>
                      {%- endfor -%}
                    </div>
                    {%- if variant_image_strs.size > 1 -%}
                      <div class="as-inside-prev swiper-button-prev d-none d-md-block">
                        <span>{% render 'icon-chevron-circle-left' %}</span>
                      </div>
                      <div class="as-inside-next swiper-button-next d-none d-md-block">
                        <span>{% render 'icon-chevron-circle-right' %}</span>
                      </div>
                      <div class="as-inside-pagination swiper-pagination inside-swiper-pagination">
                      </div>
                    {%- endif -%}
                  </div>
                  {%- if show_thumbnails -%}
                    {%- if variant_image_strs.size > 1 -%}
                      <thumbnail-gallery class="thumbnail-swiper as-thumbnail-gallery d-none d-md-block">
                        <div class="position-relative ">
                          <div thumbsSlider="" class="swiper as-gallery-thumnails-swiper opacity-0">
                            <div class="swiper-wrapper">
                              {%- for variant_image_str in variant_image_strs -%}
                                {%- liquid
                                  assign variant_image = variant_image_str | split: '||'
                                  assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
                                  assign variant_image_alt = variant_image[1]
                                -%}
                                {%- assign image = product.images[variant_image_pos] -%}
                                <div class="swiper-slide">
                                  <figure class="ratio ratio-1x1 mb-0">
                                    {% if image != blank %}
                                      <picture>
                                        <img class="object-fit-cover" width="64" height="64"
                                          srcset="{{ image | img_url: '64x64' }} 1x, {{ image | img_url: '64x64', scale: 2 }} 2x"
                                          src="{{ image | img_url: '64x64' }}"
                                          loading="lazy"
                                          alt="{{ variant_image_alt | escape }}">
                                      </picture>
                                    {% else %}
                                      <picture>
                                        <div class="object-fit-cover img-placeholder">
                                          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                                        </div>
                                      </picture>
                                    {% endif %}
                                  </figure>
                                </div>
                              {%- endfor -%}
                            </div>
                          </div>
                          {%- if variant_image_strs.size > 6 -%}
                              <div class="as-inside-prev swiper-button-prev d-none d-md-flex flex-column justify-content-center">
                                <div>{% render 'icon-chevron-left' %}</div>
                              </div>
                              <div class="as-inside-next swiper-button-next d-none d-md-flex flex-column justify-content-center">
                                <div>{% render 'icon-chevron-right' %}</div>
                              </div>
                            {%- endif -%}
                        </div>
                      </thumbnail-gallery>
                    {%- endif -%}
                  {%- endif -%}
                </div>
                {%- if show_video -%}
                <div class="swiper-slide as-outer-slide outer-slide">
                  <div class="ratio ratio-4x3 mb-0 video-bg rounded-bottom-right-md-1 rounded-bottom-left-md-1  rounded-top-left-md-1 rounded-top-right-md-1 overflow-hidden">
                    <modal-opener class="d-block d-md-none" data-modal="#as-video-modal-{{product.id}}">
                      <div class="media-icon icon-wrap-xl" data-bs-toggle="modal" data-bs-target="#as-video-modal-{{product.id}}">
                        {%- render 'icon-play-circle' -%}
                      </div>
                      <img
                        srcset="{% if current_video.preview_image.width >= 493 %}{{ current_video.preview_image | img_url: '493x' }} 493w,{% endif %}
                          {% if current_video.preview_image.width >= 600 %}{{ current_video.preview_image | img_url: '600x' }} 600w,{% endif %}
                          {% if current_video.preview_image.width >= 713 %}{{ current_video.preview_image | img_url: '713x' }} 713w,{% endif %}
                          {% if current_video.preview_image.width >= 823 %}{{ current_video.preview_image | img_url: '823x' }} 823w,{% endif %}
                          {% if current_video.preview_image.width >= 990 %}{{ current_video.preview_image | img_url: '990x' }} 990w,{% endif %}
                          {% if current_video.preview_image.width >= 1100 %}{{ current_video.preview_image | img_url: '1100x' }} 1100w,{% endif %}
                          {% if current_video.preview_image.width >= 1206 %}{{ current_video.preview_image | img_url: '1206x' }} 1206w,{% endif %}
                          {% if current_video.preview_image.width >= 1346 %}{{ current_video.preview_image | img_url: '1346x' }} 1346w,{% endif %}
                          {% if current_video.preview_image.width >= 1426 %}{{ current_video.preview_image | img_url: '1426x' }} 1426w,{% endif %}
                          {% if current_video.preview_image.width >= 1646 %}{{ current_video.preview_image | img_url: '1646x' }} 1646w,{% endif %}
                          {% if current_video.preview_image.width >= 1946 %}{{ current_video.preview_image | img_url: '1946x' }} 1946w,{% endif %}
                          {{ current_video.preview_image | img_url: 'master' }} {{ current_video.preview_image.width }}w"
                        src="{{ current_video | img_url: '1946x' }}"
                        class="w-100 h-100 object-fit-cover"
                        sizes="(min-width: 1920px) {{ 1920 | minus: 100 | times: 0.5 | round }}px, (min-width: 990px) calc({{ 0.5 | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
                        loading="lazy"
                        width="973"
                        height="{{ 973 | divided_by: current_video.preview_image.aspect_ratio | ceil }}"
                        alt="{{ current_video.preview_image.alt | escape }}"
                      >
                    </modal-opener>
                    {% if current_video.media_type == 'video' %}<video-preview>
                      {% endif %}
                      {% if current_video.media_type == 'video' %}
                        {% assign custom_style = 'd-none d-md-block w-100 h-100' %}
                      {% else %}
                        {% assign custom_style = 'd-none d-md-block w-100' %}
                      {% endif %}
                      {%- render 'product-deferred-media', media: current_video, loop: section.settings.enable_video_looping, custom_class: custom_style, custom_video_class: 'w-100 h-100 object-fit-cover', auto_play: false -%}
                    {% if current_video.media_type == 'video' %}
                    <div class="d-none d-md-block as-video-poster video-poster">
                      <div class="media-icon icon-wrap-xl as-video-play">
                        {%- render 'icon-play-circle' -%}
                      </div>
                      <img
                        srcset="{% if current_video.preview_image.width >= 493 %}{{ current_video.preview_image | img_url: '493x' }} 493w,{% endif %}
                          {% if current_video.preview_image.width >= 600 %}{{ current_video.preview_image | img_url: '600x' }} 600w,{% endif %}
                          {% if current_video.preview_image.width >= 713 %}{{ current_video.preview_image | img_url: '713x' }} 713w,{% endif %}
                          {% if current_video.preview_image.width >= 823 %}{{ current_video.preview_image | img_url: '823x' }} 823w,{% endif %}
                          {% if current_video.preview_image.width >= 990 %}{{ current_video.preview_image | img_url: '990x' }} 990w,{% endif %}
                          {% if current_video.preview_image.width >= 1100 %}{{ current_video.preview_image | img_url: '1100x' }} 1100w,{% endif %}
                          {% if current_video.preview_image.width >= 1206 %}{{ current_video.preview_image | img_url: '1206x' }} 1206w,{% endif %}
                          {% if current_video.preview_image.width >= 1346 %}{{ current_video.preview_image | img_url: '1346x' }} 1346w,{% endif %}
                          {% if current_video.preview_image.width >= 1426 %}{{ current_video.preview_image | img_url: '1426x' }} 1426w,{% endif %}
                          {% if current_video.preview_image.width >= 1646 %}{{ current_video.preview_image | img_url: '1646x' }} 1646w,{% endif %}
                          {% if current_video.preview_image.width >= 1946 %}{{ current_video.preview_image | img_url: '1946x' }} 1946w,{% endif %}
                          {{ current_video.preview_image | img_url: 'master' }} {{ current_video.preview_image.width }}w"
                        src="{{ current_video | img_url: '1946x' }}"
                        class="w-100 h-100 object-fit-cover"
                        sizes="(min-width: 1920px) {{ 1920 | minus: 100 | times: 0.5 | round }}px, (min-width: 990px) calc({{ 0.5 | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
                        loading="lazy"
                        width="973"
                        height="{{ 973 | divided_by: current_video.preview_image.aspect_ratio | ceil }}"
                        alt="{{ current_video.preview_image.alt | escape }}"
                      >
                    </div>
                    </video-preview>{% endif %}
                  </div>
                </div>
                {%- endif -%}
                {%- if  first_3d_model -%}
                 {% comment %} <div class="swiper-slide as-outer-slide outer-slide">
                    <div class="ratio ratio-1x1 mb-0 bg-default">
                      <deferred-media data-type="model" class="deferred-media">
                        <template>
                          <iframe class="model-iframe w-100 h-100" allow="fullscreen" src="{{current_model.src_3d}}" frameborder="0"></iframe>
                        </template>
                      </deferred-media>
                    </div>
                  </div>{% endcomment %}
                  <div class="swiper-slide as-outer-slide outer-slide swiper-no-swiping">
                    <div class="ratio ratio-4x3 mb-0 bg-default">
                      <product-model class="product-media product-media--model product-media--frame"
                        data-media-type="{{ first_3d_model.media_type }}"
                        data-media-id="{{ first_3d_model.id }}">
                        <button
                          class="product__xr-button bg-transparent border-0 end-0 p-0 position-absolute rounded-0 top-0"
                          type="button"
                          aria-label="{{ 'products.product.xr_button_label' | t }}"
                          data-shopify-xr
                          data-shopify-model3d-id="{{ first_3d_model.id }}"
                          data-shopify-title="{{ first_3d_model.title | escape }}"
                          data-shopify-xr-hidden
                        >
                          {% render 'icon-3d-model' %}
                        </button>
                        {{ first_3d_model | model_viewer_tag: image_size: 'master', loading: lazy, reveal: auto, toggleable: true, data-model-id: first_3d_model.id, touch-action: none,
                        class: 'w-100 h-100', preload: true, touch-action: 'none' }}
                      </product-model>
                    </div>
                  </div>
                {%- endif -%}
              </div>
              <div class="as-outside-pagination media-tab">
              </div>
            </div>
          </media-gallery>
        {% endfor %}
        </div>
      </div>
      <div class="col-12 {{ info_column }} info-wrap-col">
        {% render 'product-info', showNotifyMe: section.settings.show_notify_me, subscribe_tag: section.settings.subscribe_tag, hiddenAddToCart: section.settings.hide_add_to_cart %}
        {% render 'notify-me', showNotifyMe: section.settings.show_notify_me, heading: section.settings.notify_me_heading, text: section.settings.notify_me_text, note: section.settings.notify_me_note %}
      </div>
    </div>
  </div>

  {%- if show_video -%}
    <video-modal class="modal" id="as-video-modal-{{product.id}}" tabindex="-1">
      <div class="modal-dialog modal-fullscreen bg-default">
        <div class="modal-content">
          <div class="modal-close-btn" data-bs-dismiss="modal">
            {%- render 'icon-close-circle' -%}
          </div>
          <div class="modal-body h-100 p-0">
            <div class="h-100 modal-media-wrap">
              {% if current_video.media_type == 'external_video' and current_video.host == 'youtube'  %}<div class="ratio ratio-16x9">{% endif %}
                {%- render 'product-deferred-media', media: current_video, loop: section.settings.enable_video_looping, custom_class: 'w-100', custom_video_class: 'w-100', auto_play: true -%}
                {% if current_video.media_type == 'external_video' and current_video.host == 'youtube'  %}</div>{% endif %}
            </div>
          </div>
        </div>
      </div>
    </video-modal>
  {%- endif -%}

  {%- for variant in product.variants -%}
    {% capture variant_image_strs %}{%- render 'get-product-images-by-variant-id', image_list: image_list, target_variant: variant, all_images: product.images -%}{% endcapture %}
    {%- liquid assign variant_image_strs = variant_image_strs | split: ';;' -%}
    <gallery-modal data-current-index="0" class="modal gallery-modal" id="as-gallery-modal-{{ variant.id }}" tabindex="-1">
      <div class="modal-dialog modal-fullscreen bg-default">
        <div class="modal-content">
          <div class="modal-close-btn" data-bs-dismiss="modal">
            {%- render 'icon-close-circle' -%}
          </div>
          <div class="modal-body p-0">
            <div class="swiper as-media-swiper-inside media-swiper-inside h-100" {% if show_thumbnails %}data-thumbnails="true"{% endif %}>
              <div class="swiper-wrapper as-swiper-wrapper" data-swiper-number="{{ variant_image_strs.size }}">
                {%- for variant_image_str in variant_image_strs -%}
                  {%- liquid
                    assign variant_image = variant_image_str | split: '||'
                    assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
                    assign variant_image_alt = variant_image[1]
                  -%}
                  {%- assign image = product.images[variant_image_pos] -%}
                  <div class="swiper-slide">
                    <div class="h-100">
                      <div class="d-flex align-items-center h-100">
                        <figure class="ratio ratio-4x3 mb-0 text-center">
                          {% if image != blank %}
                            <picture>
                              <source media="(max-width: 575px)"
                                srcset="{{ image | img_url: '375x375' }} 1x, {{ image | img_url: '375x375', scale: 2 }} 2x" />
                              <img class="h-100 object-fit-cover" width="auto" height="auto"
                                srcset="{{ image | img_url: '1200x1200' }} 1x, {{ image | img_url: '1200x1200', scale: 2 }} 2x"
                                src="{{ image | img_url: '600x600' }}"
                                loading="lazy"
                                alt="{{ variant_image_alt | escape }}">
                            </picture>
                          {% else %}
                            <picture>
                              <div class="object-fit-cover img-placeholder h-100 w-100">
                                {{ 'image' | placeholder_svg_tag: 'placeholder-svg h-100' }}
                              </div>
                            </picture>
                          {% endif %}
                        </figure>
                      </div>
                    </div>
                  </div>
                {%- endfor -%}
              </div>
              {%- if variant_image_strs.size > 1 -%}
                <div class="as-inside-prev swiper-button-prev d-none d-md-block">
                  <span>{% render 'icon-chevron-circle-left' %}</span>
                </div>
                <div class="as-inside-next swiper-button-next d-none d-md-block">
                  <span>{% render 'icon-chevron-circle-right' %}</span>
                </div>
                <div class="as-inside-pagination swiper-pagination inside-swiper-pagination"></div>
              {%- endif -%}
            </div>
            {%- if show_thumbnails -%}
              {%- if variant_image_strs.size > 1 -%}
                <thumbnail-gallery class="thumbnail-swiper as-thumbnail-gallery d-none d-md-block">
                  <div class="position-relative">
                    <div thumbsSlider="" class="swiper as-gallery-modal-thumnails-swiper opacity-0">
                      <div class="swiper-wrapper">
                        {%- for variant_image_str in variant_image_strs -%}
                          {%- liquid
                            assign variant_image = variant_image_str | split: '||'
                            assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
                            assign variant_image_alt = variant_image[1]
                          -%}
                          {%- assign image = product.images[variant_image_pos] -%}
                          <div class="swiper-slide {% if forloop.first %}swiper-gallery-thumb-active{% endif %}">
                            <figure class="ratio ratio-1x1 mb-0">
                              {% if image != blank %}
                                <picture>
                                  <img class="object-fit-cover" width="64" height="64"
                                    srcset="{{ image | img_url: '64x64' }} 1x, {{ image | img_url: '64x64', scale: 2 }} 2x"
                                    src="{{ image | img_url: '64x64' }}"
                                    loading="lazy"
                                    alt="{{ variant_image_alt | escape }}">
                                </picture>
                              {% else %}
                                <picture>
                                  <div class="object-fit-cover img-placeholder">
                                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                                  </div>
                                </picture>
                              {% endif %}
                            </figure>
                          </div>
                        {%- endfor -%}
                      </div>
                    </div>
                    {%- comment -%} {%- if variant_image_strs.size > 6 -%}
                      <div class="as-inside-prev swiper-button-prev d-none d-md-flex flex-column justify-content-center">
                        <div>{% render 'icon-chevron-left' %}</div>
                      </div>
                      <div class="as-inside-next swiper-button-next d-none d-md-flex flex-column justify-content-center">
                        <div>{% render 'icon-chevron-right' %}</div>
                      </div>
                    {%- endif -%} {%- endcomment -%}
                  </div>
                </thumbnail-gallery>
              {%- endif -%}
          {%- endif -%}
          </div>
        </div>
      </div>
    </gallery-modal>
  {%- endfor -%}
</div>
{% render 'structured-product' %}

{% javascript %}
  (function() {
    var $url = document.querySelector('.as-main-product-v2-script')
    if (!window.productV2 && $url && $url.dataset.designMode !== 'yes') {
      window.productV2 = $url.value
      var $script = document.createElement('script')
      $script.src = window.productV2
      $script.defer = "defer"
      document.body.appendChild($script)
    }
  })()
{% endjavascript %}

{% comment %}
{% unless request.design_mode %}
  <script src="{{ 'main-product-v2.min.js' | asset_url }}" defer></script>
{% endunless %}
{% endcomment %}

{% schema %}
  {
    "name": "Product",
    "tag": "section",
    "class": "main-product-v2 as-main-product-v2",
   "settings": [
    {
      "type": "select",
      "id": "deskyop_layout",
      "label": "Desktop layout",
      "options": [
        {
          "value": "thumbnails",
          "label": "Thumbnails"
        },
        {
          "value": "no_thumbnails",
          "label": "No Thumbnails"
        }
      ],
      "default": "no_thumbnails"
    },
    {
      "type": "select",
      "id": "desktop_media_size",
      "label": "Desktop media size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium",
      "info": "Media is automatically optimized for mobile."
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "label": "Enable video looping",
      "default": false
    },
    {
      "type": "header",
      "content": "Add to cart"
    },
    {
      "type": "checkbox",
      "id": "hide_add_to_cart",
      "label": "hide add to cart",
      "default": false
    },
    {
      "type": "header",
      "content": "Notify me"
    },
    {
      "type": "checkbox",
      "id": "show_notify_me",
      "label": "Show notify me",
      "default": false
    },
    {
      "type": "text",
      "id": "notify_me_heading",
      "label": "Heading",
      "default": "Nofify me if it arrives"
    },
    {
      "type": "richtext",
      "id": "notify_me_text",
      "label": "Text",
      "default": "<p>Thanks for your interest. Please leave your email and we will send you a notification as soon as we have the item in stock.</p>"
    },
    {
      "type": "richtext",
      "id": "notify_me_note",
      "label": "Note",
      "default": "<p>You can opt-out at any time. See our Privacy Policy and Terms .</p>"
    },
    {
      "type": "text",
      "id": "subscribe_tag",
      "label": "Subscribe tag",
      "default": "notify_me",
      "info": "Separate each tag with an English comma"
    }
   ],
    "blocks": [
      {
        "type": "title",
        "name": "Title",
        "limit": 1
      },
      {
        "type": "line",
        "name": "Line",
        "limit": 1,
        "settings": [
          {
            "type": "select",
            "id": "top_space",
            "label": "Top space",
            "options": [
              {
                "value": "pt-1",
                "label": "Small"
              }, {
                "value": "pt-2",
                "label": "Medium"
              }, {
                "value": "pt-5",
                "label": "Large"
              }
            ],
            "default": "pt-2"
          }, {
            "type": "select",
            "id": "bottom_space",
            "label": "Bottom space",
            "options": [
              {
                "value": "pb-1",
                "label": "Small"
              }, {
                "value": "pb-2",
                "label": "Medium"
              }, {
                "value": "pb-5",
                "label": "Large"
              }
            ],
            "default": "pb-2"
          }
        ]
      },
      {
        "type": "price",
        "name": "Price",
        "limit": 1
      },
      {
        "type": "paypal",
        "name": "Paypal message",
        "limit": 1
      },
      {
        "type": "variant_picker",
        "name": "Variant picker",
        "limit": 1,
        "settings": [
          {
            "type": "radio",
            "id": "type",
            "label": "Type",
            "options": [
              {
                "value": "button",
                "label": "Button"
              },
              {
                "value": "dropdown",
                "label": "Dropdown"
              }
            ],
            "default": "button"
          },
          {
            "type": "checkbox",
            "id": "enable_color_swatches",
            "label": "Enable color swatches",
            "default": false
          },
          {
            "type": "text",
            "id": "swatch_option_name",
            "label": "Swatch option name",
            "info": "Enter the name of the product option you wish to turn into color swatches (i.e, Color)"
          },
          {
            "type": "textarea",
            "id": "color_swatches_rule_configuration",
            "label": "Color swatches rule configuration",
            "info": "Format is \"option value:color value\",Each rule must be separated by a semicolon(\";\"). \",for example:\"Light grey:#e0dddd;Pink:#f127b6;Dark yellow:dark-yellow.png;\""
          },
          {
            "type": "textarea",
            "id": "options_marker",
            "label": "Marker",
            "info": "Format is \"option value:marker_text:marker_background_color\",Each rule must be separated by a semicolon(\";\"). \",for example:\"Rokid Max AR Glasses:NEW:#007AFF;Black:HOT:#FF003D;\""
          }
        ]
      },
      {
        "type": "quantity_selector",
        "name": "Quantity selector",
        "limit": 1
      },
      {
        "type": "buy_buttons",
        "name": "Buy buttons",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_dynamic_checkout_buttons",
            "label": "Show dynamic checkout buttons",
            "default": true,
            "info": "Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. [Learn more](https://help.shopify.com/en/manual/online-store/themes/dynamic-checkout)"
          },
          {
             "type": "checkbox",
            "id": "show_custom_checkout_buttons",
            "label": "Show custom checkout buttons",
            "default": false,
            "info": "Using this setting, you can add custom checkout buttons to your product pages. [Learn more](https://help.shopify.com/en/manual/online-store/themes/dynamic-checkout)"
          },
           {
            "type": "text",
            "id": "buy_custom_label",
            "label": "Button label"
          }
        ]
      },
      {
        "type": "description",
        "name": "Description",
        "limit": 1
      },
      {
        "type": "share",
        "name": "Share",
        "limit": 1,
        "settings": [
          {
            "type": "paragraph",
            "content": "A page title and description are included with the preview image. [Learn more](https://help.shopify.com/en/manual/promoting-marketing/seo/adding-keywords#set-a-title-and-description-for-your-online-store)"
          },
          {
            "type": "paragraph",
            "content": "If you include a link in social media posts, the page’s featured image will be shown as the preview image. [Learn more](https://help.shopify.com/en/manual/online-store/images/showing-social-media-thumbnail-images)"
          }
        ]
      },
      {
        "type": "payment_methods",
        "name": "Payment methods",
        "limit": 1
      },
      {
        "type": "text",
        "name": "Text",
        "settings": [
          {
            "type": "image_picker",
            "id": "advert_icon",
            "label": "Icon"
          },
          {
            "type": "text",
            "id": "text",
            "label": "Text",
            "default": "<p>Tell a unique detail about this product.</p>"
          },
          {
            "type": "header",
            "content": "Advanced settings"
          },
          {
            "type": "select",
            "id": "text_type",
            "label": "Text type",
            "options": [
              {
                "value": "uppercase",
                "label": "Uppercase"
              },
              {
                "value": "body",
                "label": "Body"
              },
              {
                "value": "footnote",
                "label": "Footnote"
              }
            ],
            "default": "uppercase"
          },
          {
            "type": "select",
            "id": "margin_bottom",
            "label": "Space bottom",
            "options": [
              {
                "value": "mb-1",
                "label": "Small"
              },
              {
                "value": "mb-2",
                "label": "Medium"
              },
              {
                "value": "mb-6",
                "label": "Large"
              }
            ],
            "default": "mb-6"
          }
        ]
      }
    ],
    "default": {
      "blocks": [
        {
          "type": "title"
        },
        {
          "type": "price"
        },
        {
          "type": "variant_picker"
        },
        {
          "type": "buy_buttons"
        }
      ]
    }
  }
{% endschema %}
